<template>
  <div>
    <div @click="routeUrlTo" class="race_enter" v-if="showEnter">
      <div class="img"></div>
      <div @click.stop="showEnter=false" class="close_icon"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'raceEnter',
  data() {
    return {
      showEnter: false
    }
  },
  created() {

  },
  mounted() {
    if (window.location.hostname=='zjhwtc.metaxun.com'||window.location.hostname=='localhost'||window.location.hostname=='testv2.metaxun.com'){
      // this.showEnter=true
    }
  },
  methods: {
    routeUrlTo(){
      let url=`https://${window.location.hostname=='localhost'?'testv2.metaxun.com':window.location.hostname}/competition/index`
      window.open(url)
    },
  }
}
</script>

<style scoped lang="scss">
.race_enter{
  bottom: 100px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  cursor: pointer;
  user-select: none;
  animation: floatAnimation 1s linear infinite alternate;
  z-index: 99999;
  .img{
    width: 200px;
    height: 85px;
    background-image: url("../assets/images/race_enter.png");
    background-size: 100% 100%;
  }
  .close_icon{
    width: 16px;
    height: 16px;
    background-image: url("../assets/images/close_enter.png");
    background-size: 100% 100%;
  }
}
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
</style>
